<template>
  <div class="buttons">
    <a-date-picker
      class='datePicker'
      @change="onDateChange"
      size="large"
      format="YYYY-M-D"
      :placeholder="current"
    />
    <button
      :class="this.$store.state.cur_record.notes !== '' ? 'fill' : ''"
      @click="showNoteModal"
    >
      备注
    </button>
    <a-modal
      title="备注"
      :visible="noteVisible"
      @ok="handleNoteOk"
      @cancel="handleCancel"
    >
      <a-input placeholder="说点什么吧~"
               allow-clear
               v-model="note"
               id="input"
      />
    </a-modal>
    <button @click="showAccountModal">{{accountPlaceholder}}</button>
    <a-modal
      title="选择账户"
      :visible="accountVisible"
      @ok="handleAccountOk"
      @cancel="handleCancel"
    >
      <ul>
        <li v-for="(item, index) in accountList" :key="index" class="item" @click="onAccountChange(item)">
          <p>{{item.text}}{{item.type}}{{item.detail}}</p>
          <span>{{item.rest===''?'余额未设置':item.rest}}</span>
        </li>
      </ul>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue';
  import {Component} from 'vue-property-decorator';
  import { Modal, DatePicker, Input } from 'ant-design-vue';
  import dayjs from 'dayjs';
  import accountList from '@/constants/accountList';

  Vue.use(Modal);
  Vue.use(DatePicker);
  Vue.use(Input)

  @Component({
    components: {
      DatePicker, Modal, Input
    }
  })
  export default class Buttons extends Vue {
    mounted(){
      this.$store.state.cur_record.createdAt = this.current;
    }

    accountPlaceholder = '选择账户'

    accountList = accountList

    current = dayjs(new Date()).format('YYYY-M-D');

    onDateChange(date: object, dateString: string) {
      this.$store.state.cur_record.createdAt = dateString
    }

    note = this.$store.state.cur_record.notes
    noteVisible = false;

    showNoteModal(){
      this.noteVisible = true;
    }

    handleNoteOk(){
      this.$store.state.cur_record.notes = this.note
      this.noteVisible = false;
    }

    accountVisible = false;

    showAccountModal() {
      this.accountVisible = true;
    }

    onAccountChange(account: AccountItem){
      this.$store.state.cur_record.account = account
      this.accountPlaceholder = account.text
      this.accountVisible = false;
    }

    handleAccountOk(){
      this.accountVisible = false;
    }

    handleCancel() {
      this.noteVisible = false;
      this.accountVisible = false;
    }

  }
</script>

<style lang='scss' scoped>
  @import "~@/assets/style/modal.css";
  @import "~@/assets/style/input.css";
  .buttons {
    display: flex;
    padding: 4px 8px;
    background: white;

    > .datePicker{
      width: 35%;
      margin: 5px;
    }

    > button {
      font-size: 12px;
      width: 6em;
      padding: 8px 0;
      margin: 5px;
      border: 1px solid #E3E3E3;
      border-radius: 4px;
      background: transparent;

      &.fill{
        border-color: #00A1E9;
      }
    }
  }

  .item{
    padding: 5px 10px;
    list-style: none;
    border-bottom: 1px solid #CACACA;

    >p{
      margin-bottom: 0;
      font-size: 16px;
      padding: 5px 0;
    }
  }
</style>